<template>
	<view class="models-page">
		<view class="models-header">
			<hsb-business-model-search
				placeholder="请输入您想要售卖的机型名称"
				@search="$emit('search')"
			/>
			<hsb-business-model-category
				:list="categoryList"
				:active="activeCategory"
				@change="changeCategory"
			/>
		</view>
		<view class="models-body">
			<view class="brand-content">
				<hsb-business-model-brand
					:list="brandList"
					:active="activeBrand"
					@change="changeBrand"
				/>
			</view>
			<view class="product-content">
				<hsb-business-model-series
					:list="seriesList"
					:active="activeSeries"
					@change="changeSeries"
				/>
				<view class="model-product-body">
					<hsb-business-model-product
						:list="productList"
						:active="activeCategory"
						@pull-up="loadMore"
						@product="$emit('product', $event)"
					>
						<view v-if="productFirstStatus" class="product-data-status">
							<view v-if="noData" class="product-nodata">
								<image class="icon-nodata" src="@/static/images/icon_null.png"></image>
								<view class="nodata-text">暂无数据</view>
							</view>
							<view v-if="productLoadStatus && this.productList.length" class="status">加载中...</view>
							<view v-else-if="finished" class="status">没有更多数据啦～</view>
						</view>
					</hsb-business-model-product>
					<view
						v-if="(seriesLoadStatus || productLoadStatus) && this.productList.length == 0"
						class="product-loading"
					>
						<view class="spinner-cycle-loading">
							<uv-loading-icon size="50rpx" color="rgba(255, 225, 0, 0.8)" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	props: {
		options: Object
	},
	computed: {
		noData () {
			return !this.productLoadStatus && this.productList.length === 0
		},
		finished () {
			return this.productList.length && Number(this.productPageInfo.total) === this.productList.length
		}
	},
	data () {
		return {
			categoryList: [],
			brandList: [],
			seriesList: [],
			productList: [],
			queryCategory: '',
			queryBrand: '',
			activeCategory: '',
			activeBrand: '',
			activeSeries: '',
			categoryLoadStatus: false,
			brandLoadStatus: false,
			seriesLoadStatus: false,
			productLoadStatus: false,
			productFirstStatus: false,
			productPageInfo: {
				pageIndex: 1,
				pageSize: 20,
				total: 0
			}
		}
	},
	methods: {
		initModels () {
			if (this.options.cid) {
				this.queryCategory = this.options.cid
			}
			if (this.options.bid) {
				this.queryBrand = this.options.bid
			}
			this.getCategoryList()
		},
		/*
		 * 类目列表
		*/
		async getCategoryList () {
			this.categoryLoadStatus = true
			const [res] = await this.$apis.getCategoryList()
			this.categoryLoadStatus = false
			if (res._errCode === '0') {
				const classList = res._data.classList || []
				this.categoryList = classList
				if (classList.some(e => e.classId === this.queryCategory)) {
					this.activeCategory = this.queryCategory
				} else {
					this.activeCategory = classList[0]?.classId || ''
				}
				this.activeCategory && this.getBrandList()
			}
		},
		/*
		 * 品牌列表
		*/
		async getBrandList () {
			this.brandLoadStatus = true
			const [res] = await this.$apis.getBrandList({
				classId: this.activeCategory,
				pageSize: 100
			})
			this.brandLoadStatus = false
			if (res._errCode === '0') {
				const brandList = res._data.brandList || []
				this.brandList = brandList
				if (brandList.some(e => e.brandId === this.queryBrand)) {
					this.activeBrand = this.queryBrand
				} else {
					this.activeBrand = brandList[0]?.brandId || ''
				}
				this.activeBrand && this.getSeriesList()
			}
		},
		/*
		 * 系列列表
		*/
		async getSeriesList () {
			this.seriesLoadStatus = true
			const [res] = await this.$apis.getSeriesList({
				classId: this.activeCategory,
				brandId: this.activeBrand
			})
			this.seriesLoadStatus = false
			if (res._errCode === '0') {
				const seriesList = res._data.seriesList || []
				this.seriesList = seriesList
				this.activeSeries = seriesList[0]?.seriesId || ''
			}
			this.getProductList()
		},
		/*
		 * 机型列表
		*/
		async getProductList (more = false) {
			this.productLoadStatus = true
			const pageIndex = more ? this.productPageInfo.pageIndex + 1 : 1
			const pageSize = this.productPageInfo.pageSize
			const [res] = await this.$apis.getProductList({
				classId: this.activeCategory,
				brandId: this.activeBrand,
				seriesId: this.activeSeries,
				pageIndex,
				pageSize
			})
			this.productLoadStatus = false
			if (res._errCode === '0') {
				let list = res._data.productList || []
				const pageInfo = res._data.pageInfo || {}
				list = more ? this.productList.concat(list) : list
				this.productList = list
				this.productPageInfo.pageIndex = pageIndex
				this.productPageInfo.total = pageInfo.total || 0
			}
			if (!this.productFirstStatus) {
				this.productFirstStatus = true
			}
		},
		/*
		 * 切换类目
		*/
		changeCategory ({ classId }) {
			if (this.brandLoadStatus || this.seriesLoadStatus || this.productLoadStatus) return
			this.activeCategory = classId
			this.brandList = []
			this.seriesList = []
			this.productList = []
			this.activeBrand = '',
			this.activeSeries = '',
			this.getBrandList()
		},
		/*
		 * 切换品牌
		*/
		changeBrand ({ brandId }) {
			if (this.seriesLoadStatus || this.productLoadStatus) return
			this.activeBrand = brandId
			this.seriesList = []
			this.productList = []
			this.activeSeries = '',
			this.getSeriesList()
		},
		/*
		 * 切换系列
		*/
		changeSeries ({ seriesId }) {
			if (this.seriesLoadStatus || this.productLoadStatus) return
			this.activeSeries = seriesId
			this.productList = []
			this.getProductList()
		},
		/*
		 * 上拉加载
		*/
		loadMore () {
			if (
				this.finished ||
				this.categoryLoadStatus ||
				this.brandLoadStatus ||
				this.seriesLoadStatus ||
				this.productLoadStatus
			) return
			this.getProductList(true)
		}
	},
	mounted () {
		this.initModels()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
